<template>
  <div :class="$style.today">
    <span>多云到阴，局部有阵雨或雷雨，偏东风1～2</span>
    <el-divider direction="vertical"></el-divider>
    <span :class="$style.time">
      <span class="$style.bolder">{{ $moment().format("hh:mm:ss") }}</span>
      <div>
        <span>{{ $moment().format("dddd") }}</span>
        <span>{{ $moment().format("ll") }}</span>
      </div>
    </span>
  </div>
</template>

<script>
export default {
  name: "Today",
};
</script>

<style lang="scss" module>
.today {
  font-size: 20px;
  font-weight: 400;
  color: #ffffff;
  line-height: 26px;
  display: grid;
  grid-template-columns: 400px 20px 300px;
  justify-content: end;
  align-items: center;
}
.bolder {
  font-weight: bolder;
}
.time {
  display: grid;
  grid-template-columns: 1fr 2fr;
  font-size: 28px;
  place-items: center;
  text-align: right;
  > div {
    display: grid;
    justify-self: start;
    padding-left: 10px;
    grid-template-rows: 1fr 1fr;
    font-size: 14px;
    line-height: 26px;
    text-align: left;
  }
}
</style>
